@extends('admin.common.table')
@section('title', '列表示例')

@section('head')
    <style></style>
@endsection

@section('header')
    <div class="layui-card-header">综合表格示例</div>
@endsection

@section('search')
    <div class="layui-inline">
{{--        <label class="layui-form-label">用户ID</label>--}}
        <div class="layui-input-inline">
            <input type="text" name="user_id" autocomplete="off" class="layui-input" placeholder="用户ID">
        </div>
    </div>
    <div class="layui-inline">
{{--        <label class="layui-form-label">名称</label>--}}
        <div class="layui-input-inline">
            <input type="text" name="name" autocomplete="off" class="layui-input" placeholder="名称">
        </div>
    </div>
    <div class="layui-inline">
{{--        <label class="layui-form-label">类型</label>--}}
        <div class="layui-input-inline">
            <select name="type" id="type">
                <option value="">请选择类型</option>
                <option value="1">类型一</option>
                <option value="2">类型二</option>
                <option value="3">类型三</option>
                <option value="4">类型四</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
{{--        <label class="layui-form-label">开始时间</label>--}}
        <div class="layui-input-inline">
            <input type="text" name="start_time" id="start_time" autocomplete="off" class="layui-input" placeholder="开始时间">
        </div>
    </div>
    <div class="layui-inline">
{{--        <label class="layui-form-label">结束时间</label>--}}
        <div class="layui-input-inline">
            <input type="text" name="end_time" id="end_time" autocomplete="off" class="layui-input" placeholder="结束时间">
        </div>
    </div>
@endsection

@section('content')
    <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
        <button class="layui-btn" data-type="add">添加</button>
        <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
        <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
        <button class="layui-btn" data-type="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-primary">总金额：￥<span>0</span></button>
        <button class="layui-btn layui-btn-primary">总金额：￥<span>0</span></button>
        <button class="layui-btn layui-btn-primary">总金额：￥<span>0</span></button>
    </div>

    <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>
    <blockquote class="layui-elem-quote">此处由于是静态模拟数据，所以搜索后重载的结果没变，这并非是 BUG。实际使用时改成真实接口并根据搜索的字段筛选出对应的数据即可。</blockquote>
@endsection

@section('foot')
    <script type="text/html" id="test-table-operate-barDemo">
        {{--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>--}}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.config({
            base: '/static/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table'], function(){
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                admin = layui.admin,
                laydate = layui.laydate;

            laydate.render({
                elem: '#start_time',
                type: 'datetime',
                format: 'yyyy-M-d HH:mm:ss'
            });
            laydate.render({
                elem: '#end_time',
                type: 'datetime',
                format: 'yyyy-M-d HH:mm:ss'
            });

            table.render({
                elem: '#test-table-operate'
                ,url: '/admin/curd/lists'
                ,page: true
                ,autoSort: false
                ,cols: [[
                    {type:'checkbox', fixed: 'left'}
                    ,{field:'id', minWidth:80, title: 'ID', sort: true, fixed: 'left'}
                    ,{field:'username', minWidth:80, title: '用户名'}
                    ,{field:'sex', minWidth:80, title: '性别', sort: true}
                    ,{field:'city', minWidth:80, title: '城市'}
                    // 表格内的开关, 输入框等去layui文档查看即可
                    ,{field:'sign', minWidth: 160, title: '签名'}
                    ,{field:'experience', minWidth:80, title: '积分', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'wealth', minWidth:135, title: '财富', sort: true}
                    ,{field:'classify', minWidth:80, title: '职业'}
                    ,{field:'score', minWidth:80, title: '评分', sort: true}
                    ,{minWidth:178, title: '操作', align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo', fixed: 'right'}
                ]]
            });

            // 搜索实现
            let where = {};
            form.on('submit(data-search-btn)', function(data){
                where = {...where, ...data.field};
                //执行重载
                table.reload('test-table-operate', {
                    where: where
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
            table.on('sort(test-table-operate)', function(obj){
                where.order = obj.type;
                where.field = obj.field;

                table.reload('test-table-operate', {
                    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    , where: where
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });

            //监听表格复选框选择
            table.on('checkbox(test-table-operate)', function(obj){
                console.log(obj)
            });

            //监听工具条
            table.on('tool(test-table-operate)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    // 编辑操作跟添加类似
                    layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
            });

            var $ = layui.$, active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                ,getCheckLength: function(){ //获取选中数目
                    var checkStatus = table.checkStatus('test-table-operate')
                        ,data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                }
                ,isAll: function(){ //验证是否全选
                    var checkStatus = table.checkStatus('test-table-operate');
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                }
                ,add: function(){
                    // 添加操作
                    layer.open({
                        type: 2
                        , title: '添加'
                        , content: 'add'
                        , maxmin: true
                        , area: ['80%', '80%']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                        }
                    });
                }
            };

            $('.test-table-operate-btn .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    </script>
@endsection
